<template>
  <div class="about">
    <v-header />
    <v-sidebar />
    <div class="content-box" :class="{ 'content-collapse': collapse }">
      <v-tags></v-tags>
      <div class="content">
        <router-view v-slot="{ Component }">
          <transition name="move" mode="out-in">
            <keep-alive :include="tagsList">
              <component :is="Component" />
            </keep-alive>
          </transition>
        </router-view>
        <!-- <el-backtop target=".content"></el-backtop> -->
      </div>
    </div>
    <audio
      controls="controls"
      class="audio"
      :src="audio"
      ref="audio"
      style="z-index:-99"
    ></audio>
  </div>
</template>
<script>
import vHeader from "../components/Header";
import vSidebar from "../components/Sidebar";
import vTags from "../components/Tags.vue";
export default {
  components: {
    vHeader,
    vSidebar,
    vTags,
  },
  computed: {
    tagsList() {
      return this.$store.state.tagsList.map((item) => item.name);
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },
  data() {
    return {
      path: "wss://www.cfxs.work/api/webSocket/admin",
      socket: "",
      audio:require("../static/order.mp3")
    };
  },
  mounted() {
    this.webSocketInit();
  },
  methods: {
    webSocketInit() {
      if (typeof WebSocket === "undefined") {
        this.$message.error("您的浏览器不支持socket");
        console.log("您的浏览器不支持socket");
      } else {
        this.socket = new WebSocket(this.path);
        this.socket.onopen = this.open;
        this.socket.onerror = this.error;
        this.socket.onmessage = this.getMessage;
      }
    },
    open: function () {
      console.log("socket连接成功");
    },
    error: function () {
      console.log("连接错误");
    },
    getMessage: function (msg) {
      console.log(msg);
      this.$refs.audio.currentTime = 0; //从头开始播放提示音
      this.$nextTick(function () {
           this.$refs.audio.play(); 
      });
     //播放
      console.log(msg.data);
    },
    close: function () {
      console.log("socket已经关闭");
    },
  },
};
</script>
<style lang="scss" scoped>
.audio{
  position: relative;
  z-index: -99;
}
</style>